<!--这里是斗地主的游戏界面-->
<template>
  <div id="desktop" style="background: url('/landlord/desk.jpg') 0% 100% / cover;object-fit: cover;background-size: cover;">
    <AlertSound @turnOn="turnOn" @turnOff="turnOff" v-if="showAlertSound"></AlertSound>
    <Victory
      v-if="processing===2"
      :victory="victory"
      :victoryer="victoryer"
      :mineVictory="mineVictory"
      @gameOver="gameOver"></Victory>
    <!--    //其他玩家的显示栏-->
    <div style="height: 18vh; text-align: center;">
<!--      玩家1区域-->
      <player class="player" :player="player1" :is-landlord="processing!==0&&player1.index===landlordIndex"></player>
      <div class="puckerStatus">{{player1SendedType}}</div>
<!--      地主底牌显示区域-->
      <div style="display: inline-block;width: 60vw">
        <PuckerCard style="vertical-align: middle;" v-for="(item, index) in dipai" :active="false" :back="processing===1" :pucker="item"></PuckerCard>
      </div>
      <div class="puckerStatus">{{player2SendedType}}</div>
<!--      玩家2区域-->
      <player class="player" :player="player2" :is-landlord="processing!==0&&player2.index===landlordIndex"></player>
    </div>
<!--    发牌区域-->
    <div style="height: 37vh">
      <div style="display: inline-block;width: 20vw;vertical-align: top;text-align: center;">
<!--        显示玩家1的牌数-->
        <div style="display: inline-block;z-index: 1;margin-top: 12vh;margin-left: -3vw;">
          <puckerCard class="playerShowCard" v-for="index in player1.pokerNum" :back="false"></puckerCard>
        </div>
<!--        <div style="display: inline-block;">{{player1.pokerNum}}</div>-->
      </div>
<!--      出牌以及发牌区域-->
      <div style="display: inline-block;width: 60vw;text-align: center;height: 100%;">
        <div v-if="isNewTurn" class="alert">当局无人出牌，新一轮出牌由你开始</div>
        <PuckerCard v-if="!isNewTurn" v-for="(item, index) in sendedPucker" :pucker="item" :index="index"></PuckerCard>
      </div>
      <div style="display: inline-block;width: 20vw;vertical-align: top;text-align: center;">
<!--        显示玩家2的牌数-->
<!--        <div style="display: inline-block;">{{player2.pokerNum}}</div>-->
        <div style="display: inline-block;z-index: 1;margin-top: 12vh;margin-left: 10vw;">
          <puckerCard class="playerShowCard" v-for="index in player2.pokerNum" :back="false"></puckerCard>
        </div>
      </div>
    </div>
<!--    操作按钮区域-->
    <div style="height: 10vh;text-align: center;">
      <div v-if="currentIndex===myIndex">
        <div v-if="this.processing===1">
          <button :class="myTimeFlag?'gameButton':'gameButton-no'" :disabled="!myTimeFlag" @click="sendPucker">出牌</button>
          <button :class="!myTimeFlag&&!isNewTurn?'gameButton':'gameButton-no'" :disabled="myTimeFlag||isNewTurn" @click="noSend">不出</button>
        </div>
        <div class="scoreDiv" v-if="processing===0">
          <button class="gameButton" @click="setScore(0)">不叫</button>
          <button class="gameButton" @click="setScore(1)">1分</button>
          <button class="gameButton" @click="setScore(2)">2分</button>
          <button class="gameButton" @click="setScore(3)">3分</button>
        </div>
      </div>
    </div>
<!--    自己的操作区域-->
    <div style="height: 20vh">
      <player class="player" :player="players[myIndex]" :is-landlord="processing!==0&&myIndex===landlordIndex"></player>
      <div style="display: inline-block; width:80vw; text-align: center;">
        <PuckerCard v-if="item.sended===false" @selectedPucker="addPucker" v-for="(item, index) in puckerList" :active="item.active" :pucker="item" :index="index"></PuckerCard>
      </div>
    </div>
    <div style="height: 40px;margin-top: -15px;">
<!--    积分、倍数、聊天区域-->
      <div style="display: inline-block;width: 45vw;vertical-align: top;">
        <span class="margin-box">
          <span class="min-button">
            <span class="title">总分数:</span>
            <span class="value">{{allMoney}}</span>
          </span>
        </span>
        <div class="margin-box">
          <div class="min-button">
            <div class="min-button title">当前下注:</div>
            <div class="min-button value">{{score}}</div>
          </div>
        </div>
      </div>
      <div style="display: inline-block;width: 55vw;vertical-align: top;text-align: right;">
        <div class="margin-box">
          <div class="min-button">
            <div class="min-button title">倍数:</div>
            <div class="min-button value">x{{times}}</div>
          </div>
        </div>
        <!--      聊天框-->
        <div style="display: inline-block;margin-right: 125px;">
          <div id="chatView" style="background-image: url('/landlord/chatViewBackGround.png')" v-if="showChatView">
            <div class="content">
              <div class="item" v-for="item in messageList">
                <span class="time">[{{item.time}}]</span>
                <span :style="myIndex===item.index?'color:rgb(191 0 0);font-style: italic;':''" class="name">{{myIndex===item.index?'(我)':''}}{{players[item.index].name}}
                <span :class="landlordIndex==item.index?'roleLandlord':'rolePeasant'">{{landlordIndex==item.index?'地主':'农民'}}</span>
                :
              </span>
                <span :style="myIndex===item.index?'color:rgb(191 0 0);font-style: italic;':''" class="body">{{item.content}}</span>
              </div>
            </div>
            <div class="sendView">
              <input class="input" @keypress.enter="sendMessage" v-model="chatMessage" type="text"/>
              <button @click="sendMessage">发送</button>
            </div>
          </div>
          <div class="chat" style="background-image:url('/landlord/chatIcon.png');" @click="setChatView"><span class="noRead" v-if="noRead!=0">{{noRead}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Player from "@/components/game/landlord/gameView/components/Player";
import PuckerCard from "@/components/game/landlord/gameView/components/PuckerCard";
import GameButton from "@/components/game/landlord/gameView/components/GameButton";
import Victory from "@/components/game/landlord/gameView/components/Victory";
import AlertSound from "@/components/game/landlord/gameView/components/AlertSound";
import request from "@/utils/request";
export default {
  name: "LandlordGameView",
  components: {PuckerCard, Player, GameButton, Victory, AlertSound},
  props:{
    ws:{
      required:true
    },
    user:{
      required:true
    }
  },
  watch:{
    bgSoundStatus(newValue){
      console.log("newValue123", newValue);
      if(newValue == 0){
        this.audio.src = this.startSound;
        console.log("播放开始音乐");
      }else if(newValue == 1){
        this.audio.src = this.boomSound;
        console.log("播放炸弹音乐");
      }else if(newValue == 2){
        this.audio.src = this.finalSound;
        console.log("播放末尾音乐");
      }
      this.audio.loop = true;
      this.audio.volume = 0.18;
      this.$nextTick(() => {
        console.log("开始播放音乐");
        this.audio.play();
      });

    },
  },
  computed:{
    //没有读到的消息
    noRead(){
      return this.messageList.length-this.read;
    },
    isPlayAnimation(){
      //发牌动画开关
      return this.processing==0&&!this.started;
    },
    isNewTurn(){
      return this.newTurn&&this.sendedPucker.length==0&&this.processing==1;
    },
    player1(){
      return this.players[(this.myIndex+1)%3];
    },
    player2(){
      return this.players[(this.myIndex+2)%3];
    },
    mine(){
      return this.players[this.myIndex];
    },
    //我是否胜利
    mineVictory(){
      if(this.processing==2){
        //我是否是地主
        let flag = this.myIndex == this.landlordIndex;
        if(this.victory){
          if(flag){
            flag = true;
          }else{
            flag = false;
          }
        }else{
          if(flag){
            flag = false;
          }else{
            flag = true;
          }
        }
        if(flag){
          this.audio.src = this.victorySound;
        }else{
          this.audio.src = this.loseSound;
        }
        this.audio.loop=false;
        this.audio.play();
        return flag;
      }
    },
    victoryer(){
      if(this.processing==2){
        if(this.victory){
          return this.players.filter(item=>item.index===this.landlordIndex);
        }else{
          return this.players.filter(item=>item.index!==this.landlordIndex);
        }
      }
      return []
    },
    myTimeFlag(){
        return this.currentIndex==this.myIndex&&this.readyPucker.length!==0;
    },
    //玩家1出牌的类型
    player1SendedType(){
      if(this.currentIndex==(this.myIndex+1)%3){
        return "思考中"
      }
      if(this.sendedPlayer==(this.myIndex+1)%3){
        if(this.sendedPucker.length==0){
          return "不出";
        }
      }
    },
    //玩家2出牌的类型
    player2SendedType(){
      if(this.currentIndex==(this.myIndex+2)%3){
        return "思考中"
      }
      if(this.sendedPlayer==(this.myIndex+2)%3){
        if(this.sendedPucker.length==0){
          return "不出";
        }
      }
    }
  },
  data(){
    return{
      bgSoundStatus: -1,   //0是开始音乐，1是炸弹音乐，2是单牌音乐
      allowMusic: false,
      oneVoiceFlag: false,
      twoVoiceFlag: false,
      audio: new Audio(), //背景音乐
      peopleVoiceAudio: new Audio(),  //人说话的声音
      chatVoiceAudio: new Audio(),  //消息提示的声音
      showAlertSound: true,
      soundPath: '',      //背景音乐路径
      //声音资源
      startSound: require("@/assets/sound/start.mp3"),
      finalSound: require("@/assets/sound/final.mp3"),
      boomSound: require("@/assets/sound/boom.mp3"),
      victorySound: require("@/assets/sound/victorySound.mp3"),
      loseSound: require("@/assets/sound/loseSound.mp3"),
      noScore: require("@/assets/sound/noScore.mp3"),
      score1: require("@/assets/sound/1score.mp3"),
      score2: require("@/assets/sound/2socre.mp3"),
      score3: require("@/assets/sound/3score.mp3"),
      bomb: require("@/assets/sound/bomb.mp3"),
      noSendVoice: require("@/assets/sound/noSend.mp3"),
      last1: require("@/assets/sound/last1.mp3"),
      last2: require("@/assets/sound/last2.mp3"),
      singlePoker:[],
      plane: require("@/assets/sound/plane.mp3"),
      kingdom: require("@/assets/sound/kingdom.mp3"),
      chatNotice: require("@/assets/sound/chatNotice.mp3"),
      three: require("@/assets/sound/three.mp3"),
      threeWithOne: require("@/assets/sound/threewithone.mp3"),
      threeWithTwo: require("@/assets/sound/threewithtwo.mp3"),
      continuePoker: require("@/assets/sound/continue.mp3"),
      continueBomb: require("@/assets/sound/continuebomb.mp3"),
      continueTwo: require("@/assets/sound/continuetwo.mp3"),
      fourWithFour: require("@/assets/sound/fourwithfour.mp3"),
      fourWithTwo: require("@/assets/sound/fourwithtwo.mp3"),
      ///////////////
      messageList:[],     //当前消息队列
      read:0,             //已读了几条消息
      chatMessage:'',     //当前要发送的消息
      showChatView:false,   //是否显示聊天框
      victory:false,         //地主是否胜利
      game:{
        roomId:''
      },               //游戏对象
      myIndex:0,          //自己的位置
      processing:0,       //游戏的进程，0为叫分，1为对局，2为结束
      currentIndex:0,     //记录当前轮到谁
      landlordIndex:-1,   //地主是谁
      puckerList:[],      //自己的牌
      dipai:[],           //地主底牌
      players:[],         //玩家列表
      readyPucker:[],     //准备出牌的id序列
      bufferReadyPucker:[],   //准备出牌的扑克对象索引
      sendedPucker:[],    //上一个玩家出的牌
      sendedPlayer:-1,    //上一个出牌的玩家索引
      score:0,            //单局分数
      times:1,            //该局倍数
      newTurn:false,       //是否为新的一轮出牌
      started:true,        //是否已经接收过发牌动画
      allMoney:0,         //玩家的所有积分
    }
  },
  methods:{
    turnOn(){
      this.allowMusic = true;
      this.setBgSoundStatus();
      // this.audio.play();
      this.showAlertSound = false;
    },
    turnOff(){
      this.showAlertSound = false;
    },
    sendMessage(){
      if(this.chatMessage==''||this.chatMessage==null){return ;}
      const message={
        order:3,
        mode:3,
        roomId:this.game.roomId,
        game:1,
        content:this.chatMessage
      }
      this.ws.send(JSON.stringify(message));
      this.chatMessage='';
    },
    setChatView(){
      this.showChatView=!this.showChatView;
      if(this.showChatView&&this.noRead!=0){
        this.setRead();
      }
    },
    setRead(){
      const message={
        order:3,
        mode:4,
        roomId:this.game.roomId,
        game:1,
      }
      this.ws.send(JSON.stringify(message));
    },
    addPucker(index){
      let puckerList=this.puckerList;
      if(puckerList[index].sended){return;}
      puckerList[index].active=!puckerList[index].active;
      // console.log("index:",index,puckerList[index].active);
      if(puckerList[index].active){
        this.readyPucker.push(puckerList[index].id);
        this.bufferReadyPucker.push(index);
      }else{
        this.readyPucker=this.readyPucker.filter(item=>item!==puckerList[index].id);
        this.bufferReadyPucker=this.bufferReadyPucker.filter(item=>item!==index);
      }
    },
    noSend(){
      const p = {
        order: 3,
        mode:2,
        cmd:0,
        roomId: this.game.roomId,
        game:1,
        idList:[]
      }
      this.ws.send(JSON.stringify(p));
    },
    sendPucker(){
      const p = {
        order: 3,
        mode:2,
        cmd:0,
        roomId: this.game.roomId,
        game:1,
        idList:this.readyPucker
      }
      this.ws.send(JSON.stringify(p));
    },
    getProcessing(){
      const p = {
        order: 7,
        roomId: this.game.roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    getMessageList(){
      const p = {
        order:3,
        mode:5,
        game:1,
        roomId:this.game.roomId
      }
      // console.log("请求消息列表");
      this.ws.send(JSON.stringify(p));
    },
    handle(res){
      switch (res.order){
        case 3:
          this.processingNotice(res);
          break;
        case 5:
          this.game.roomId=res.roomId;
          this.getProcessing();
          this.getMessageList();
          this.getTimes();
          break;
        case 7:
          this.processing=res.processing;
          this.currentIndex=res.currentIndex;
          //获取之前打出去的牌
          if(this.processing!=0&&res.lastPlayer!=-1){
            this.sendedPlayer=res.lastPlayer;
            this.sendedPucker=res.lastPoker;
            // this.playPokerVoice();
          }
          this.processingHandle(res);
          break;
        case 8:
          this.currentIndex=res.nextIndex;
          break;
        case 11:
          this.victory=res.landlord
          this.processing=2;
          this.soundPath = this.finalSound;
          break;
        case 12:
          this.times=res.times;
          this.score=res.money;
          break;
        case 13:
          this.messageList=res.messages;
          this.read=res.read;
          if(this.showChatView&&this.noRead!=0){
            this.setRead();
          }else{
            if(this.allowMusic){
              this.chatVoiceAudio.src = this.chatNotice;
              this.chatVoiceAudio.play();
            }
          }
          break;
      }
    },
    //获取倍数信息
    getTimes(){
      const p = {
        order:3,
        mode:6,
        game:1,
        roomId:this.game.roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    //游戏结束事件
    gameOver(){
      //返回到房间
      if(this.allowMusic){
        this.audio.pause();
      }
      this.$emit("gameOver");
    },
    processingHandle(res){
      switch (this.processing){
        case 0:
          //当前还处于叫分阶段
          this.getScore();
          this.soundPath = this.startSound;
          break;
        case 1:
          //当前处于对局阶段
          this.landlordIndex=res.landlord;
          this.soundPath = this.startSound;
          break;
      }
      //检查自己是否有牌
      if(this.puckerList.length<17){
        //请求要牌
        this.getPucker();
      }
    },
    processingNotice(res){
      switch (res.mode){
        case 0:
          //当前牌列表以及玩家列表
          this.puckerList=res.puckerList;
          this.puckerList.forEach(item=>{item.active=false;});
          this.dipai=res.dipai;
          this.dipai.forEach(item=>{item.active=false;});
          this.players=res.players;
          this.started=res.start;
          this.myIndex=this.players.filter(item=>item.name===this.user.uname)[0].index;
          if(this.myIndex==this.landlordIndex&&this.puckerList.length==17&&this.processing==1){
            //把底牌加到手牌那里去
            this.dipai.forEach(item=>this.puckerList.push(item));
            this.puckerList.sort((a, b)=>{
              return b.value - a.value;
            });
          }
          this.newTurn=(res.lastIndex==this.myIndex&&res.nextIndex==this.myIndex);
          if(this.newTurn){
            this.sendedPucker=[];
          }
          this.setBgSoundStatus();
          break;
        case 1:
          if(res.result){
            this.currentIndex=res.nextIndex;//现在轮到谁出牌
            this.sendedPlayer=res.index;
            // this.newTurn=res.newTurn;
            // console.log("出牌人:"+this.players.filter(item=>item.index==this.sendedPlayer)[0].name,"出牌张数:"+this.sendedPucker.length);
            // console.log("现在轮到"+this.players.filter(item=>item.index==this.currentIndex)[0].name+"出牌");
            if(!res.noSend){
              //播放语音，是什么牌

              this.newTurn=false;
              this.sendedPucker=res.idList;
              this.sendedPucker.forEach(item=>{item.active=false;});
              if(this.sendedPlayer==this.myIndex){
                //设置里面的牌为已打出状态
                this.bufferReadyPucker.forEach(item=>this.puckerList[item].sended=true);
              }else{
                this.players.filter(item=>item.index==this.sendedPlayer)[0].pokerNum-=this.sendedPucker.length;
              }
              this.playPokerVoice(res.pokerDefine);
            }else{
              //如果没有上一个玩家出牌，并且下一个就轮到自己，并且上一次出牌的玩家还是自己，那么就是新的一局
              // console.log("没有出牌,上一次出了牌的玩家是"+res.lastIndex+",下一次出牌的玩家"+res.nextIndex+",我的位置"+this.myIndex);
              this.peopleVoiceAudio.src = this.noSendVoice;
              this.peopleVoiceAudio.play();
              this.newTurn=(res.lastIndex==this.myIndex&&res.nextIndex==this.myIndex);
              if(this.newTurn){
                this.sendedPucker=[];
              }
              // console.log("是否新的一轮:"+this.newTurn,"打出的牌:"+this.sendedPucker.length,"processing:"+this.processing);
            }
          }
          //清空准备牌序列
          this.bufferReadyPucker.forEach(item=>this.puckerList[item].active=false);
          this.bufferReadyPucker=[];
          this.readyPucker=[];
          this.setBgSoundStatus();
          break;
        case 2:
          this.currentIndex=res.nextIndex;
          if(res.status==1){
            this.landlordIndex=res.landlord;
            this.currentIndex=res.landlord;
            this.processing=1;
            this.players.filter(item=>item.index==this.landlordIndex)[0].pokerNum+=3;
            this.peopleVoiceAudio.src = this.score3;
            this.peopleVoiceAudio.play();
          }else{
            if(res.score == 1){
              this.peopleVoiceAudio.src = this.score1;
              this.peopleVoiceAudio.play();
            }else if(res.score == 2){
              this.peopleVoiceAudio.src = this.score2;
              this.peopleVoiceAudio.play();
            }else if(res.score == 0){
              this.peopleVoiceAudio.src = this.noScore;
              this.peopleVoiceAudio.play();
            }
          }
          if(this.myIndex==this.landlordIndex&&this.puckerList.length==17&&this.processing==1){
            //把底牌加到手牌那里去
            this.dipai.forEach(item=>this.puckerList.push(item));
            this.puckerList.sort((a, b)=>{
              return b.value - a.value;
            });
          }
          break;
      }
    },
    playPokerVoice(type){
      if(this.sendedPucker.length == 0){
        return ;
      }
      let value = this.sendedPucker[0].value;
      this.peopleVoiceAudio.volume = 1;
      //判断是否是炸弹
      switch (type){
        case 1:
          if(value >17){
            return;
          }
          this.peopleVoiceAudio.src = this.singlePoker[value-2];
          console.log("value", value);
          break;
        case 2:
          if(value >15){
            return;
          }
          this.peopleVoiceAudio.src = this.singlePoker[15 + value-2];
          break;
        case 3:
          this.peopleVoiceAudio.src = this.three;
          break;
        case 4:
          this.peopleVoiceAudio.src = this.threeWithOne;
          break;
        case 5:
          this.peopleVoiceAudio.src = this.threeWithTwo;
          break;
        case 7:
          this.peopleVoiceAudio.src = this.continuePoker;
          break;
        case 8:
          this.peopleVoiceAudio.src = this.continueTwo;
          break;
        case 9:
          this.peopleVoiceAudio.src = this.continueBomb;
          break;
        case 10:
        case 11:
        case 12:
          this.peopleVoiceAudio.src = this.plane;
          break;
        case 13:
          this.peopleVoiceAudio.src = this.bomb;
          if(this.bgSoundStatus != 1){
            this.bgSoundStatus = 1;
            this.audio.src = this.boomSound;
            this.audio.play();
          }
          break;
        case 14:
          this.peopleVoiceAudio.src = this.kingdom;
          if(this.bgSoundStatus != 1){
            this.bgSoundStatus = 1;
            this.audio.src = this.boomSound;
            this.audio.play();
          }
          break;
        default:
          return;
      }
      this.peopleVoiceAudio.volume = 1;
      this.peopleVoiceAudio.play();
    },
    setBgSoundStatus(){
      console.log("call.")
      if(!this.allowMusic){
        console.log("当前不允许播放音乐")
        return ;
      }
      if(this.players.length==0){
        console.log("玩家数组为空")
        return;
      }
      console.log("players", this.players);
      for(let p=0;p<this.players.length;p++){
        if(this.players[p].pokerNum <= 2){
          this.bgSoundStatus = 2;
          console.log("开始切换音乐");
          if(this.players[p].pokerNum == 2 && !this.twoVoiceFlag){
            this.peopleVoiceAudio.src = this.last2;
            this.peopleVoiceAudio.play();
            this.twoVoiceFlag = true;
          }else if(this.players[p].pokerNum == 1 && !this.oneVoiceFlag){
            this.peopleVoiceAudio.src = this.last1;
            this.peopleVoiceAudio.play();
            this.oneVoiceFlag = true;
          }
          return ;
        }
      }
      let myNum = this.puckerList.filter(item=>!item.sended).length;
      if(myNum<=2){
        this.bgSoundStatus = 2;
        if(myNum == 2 && !this.twoVoiceFlag){
          this.peopleVoiceAudio.src = this.last2;
          this.peopleVoiceAudio.play();
          this.twoVoiceFlag = true;
        }else if(myNum == 1 && !this.oneVoiceFlag){
          this.peopleVoiceAudio.src = this.last1;
          this.peopleVoiceAudio.play();
          this.oneVoiceFlag = true;
        }
        console.log("我的牌已不足，开始切换音乐");
        return ;
      }
      this.bgSoundStatus = 0;
    },
    getScore(){
      //查询当前是谁叫分
      const p = {
        order:8,
        roomId:this.game.roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    getUser(){
      request.get("/user/a/" + this.user.uname).then(res => {
        this.allMoney=res.data.score;
        // console.log("picture:"+this.user.picture);
      })
    },
    setScore(score){
      const p = {
        order:3,
        mode:2,
        cmd: 1,
        game:1,
        score:parseInt(score),
        roomId:this.game.roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    getPucker(){
      //请求扑克牌列表
      const p = {
        order:9,
        roomId:this.game.roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    getPerformance(){
      const re={
        order:5
      }
      this.ws.send(JSON.stringify(re));
    }
  },
  beforeMount() {
    let handle = (m)=>this.handle(m);
    this.ws.onmessage=function (m){
      handle(JSON.parse(m.data));
    }
    //查找
    this.getPerformance();
    this.getUser();
    for(let i=1;i<29;i++){
      this.singlePoker[i] = require("@/assets/sound/single/"+i+".mp3");
    }
  },
  mounted() {
    console.log("加载后的音频", this.singlePoker);
  }
}
</script>

<style scoped>
.noRead{
  position: absolute;
  padding: 1px;
  font-size: var(--font-size);
  border-radius: 10px;
  width: calc(var(--font-size) * 1.2);
  height: calc(var(--font-size) * 1.2);
  background: #f00;
  color: #fff;
  margin-top: -15px;
  margin-left: -11px;
  text-align: center;
  --font-size: 18px;
}
#chatView{
  position: absolute;
  width: 20vw;
  height: 50vh;
  margin-top: -55vh;
  margin-left: -7vw;
  padding: 7px;
  background-size: cover;
  -o-object-fit: contain;
  object-fit: cover;
}
#chatView > .content{
  overflow-y: scroll;
  margin: 5px;
  padding: 3px;
  height: 80%;
  font-size: 15px;
  scrollbar-width:none;
  text-align: left;
}
#chatView > .content::-webkit-scrollbar{
  width: 0;
}
.content > .item{
  margin-bottom: 4px;
}
.item > .time{
  color: #a33e00;
}
.item > .name{
  color: #25550d;
}
.item > .body{
  font-family: "微软雅黑 Light";
  color: #000;
}
.sendView > .input{
  border: none;
  background: #fff0;
  border-bottom: 1px solid;
  outline: none;
}
#chatView > .sendView{
  height: 20%;
  text-align: center;
}

.margin-box{
  background: #6c4820;
  margin-left: 10px;
  margin-right: 10px;
  padding: 9px;
  border-radius: 10px/20px;
  box-shadow: 0px 0px 1px 1px #4d2f0f;
  display: inline-block;
  vertical-align: top;
}

.margin-box > .min-button{
  padding-top: 7px;
  padding-bottom: 2px;
  font-size: 15px;
  box-shadow: #414141 0px 0px 0px 1px;
  background: #271303;
  color: #fff;
  display: inline-block;
  vertical-align: initial;
  border-radius: 10px/20px;
}
.min-button > .title{
  font-size: 20px;
  display: inline-block;
  padding-left: 10px;
}
.min-button > .value{
  display: inline-block;
  padding-left: 20px;
  padding-right: 10px;
  vertical-align: top;
}
.chat{
  transition-duration: 0.3s;
  cursor: pointer;
  padding: 3px;
  background-size: contain;
  height: 40px;
  width: 54px;
  display: inline-block;
}
.chat:hover{
  filter: drop-shadow(0px 0px 6px white);
}
.alert{
  width: 40vw;
  display: inline-block;
  margin-top: 10vh;
  padding: 10px;
  border: 2px solid #fff;
  vertical-align: middle;
  box-shadow: #e98f03 0px 0px 3px 3px;
  border-radius: 100px / 40px;
  background: #e98f03;
  -webkit-animation-name: alert-1004e79d;
  animation-name: alert-1004e79d;
  -webkit-animation-duration: 3s;
  animation-duration: 13s;
  animation-iteration-count: 1;
  overflow: hidden;
  visibility: hidden;
}

@keyframes alert {
  0%{
    transform: translateY(-5vh);
    height: 0vh;
    padding: 0px;
    border: 0px;
    visibility: hidden;
  }
  10%{
    transform: translateY(5vh);
    height: auto;
    padding: 10px;
    visibility: visible;
  }
  90%{
    transform: translateY(5vh);
    height: auto;
    padding: 10px;
    visibility: visible;
  }
  100%{
    transform: translateY(10vh);
    height: 0vh;
    padding: 0px;
    border: 0px;
    visibility: hidden;
  }
}

.playerShowCard{
  display: block;
  margin-top: -85px;
}
.playerShowCard:hover{
  display: block;
  margin-top: -85px;
}

  .scoreDiv{
    left: 48vw;
    position: fixed;
  }
  #desktop{
    background: green;
    width: 100vw;
    height: 100vh;
  }
  #puckerList{
    position: absolute;
    margin-left: 44vw;
    margin-top:65vh;
  }

  .player{
    display: inline-block;
    width: 14vw;
    vertical-align: top;
    text-align: center;
  }
  .puckerStatus{
    display: inline-block;
    width: 6vw;
    vertical-align: middle;
    text-align: center;
    color: #d79303;
    font-size: 26px;
    word-break: keep-all;
    text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  }
  .gameButton{
    transition-duration: 0.2s;
    background: #d79303;
    border-radius: 10px;
    border: 3px solid #cccaca;
    font-size: 30px;
    margin-left: 5px;
    color: #910000;
    cursor: pointer;
    font-family: 幼圆;
  }
  .gameButton-no{
    transition-duration: 0.2s;
    background: #6b6b6b;
    border-radius: 10px;
    border: 3px solid #cccaca;
    font-size: 30px;
    color: #b6b6b6;
    cursor: pointer;
    font-family: 幼圆;
  }
  .gameButton:hover{
    background: #eaa02b;
  }
  .gameButton:active{
    background: #a8761d;
  }

</style>
